<template>
  <div class="carousel-wrap">
    <!-- 轮播图 -->
    <el-carousel
      indicator-position="outside"
      trigger="click"
      :height="bannerHeight + 'px'"
    >
      <el-carousel-item v-for="item in carousel" :key="item.id">
        <h3 class="small">
          <img
            ref="bannerHeight"
            @load="imgLoad"
            :src="item.url"
            alt="图片出错"
            width="100%"
          />
        </h3>
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索 -->
    <search class="search" />
  </div>
</template>

<script>
import Search from "@/components/common/Search";

import { get_carousel } from "@/api/carousel";
export default {
  props: ["type"],
  data() {
    return {
      bannerHeight: 0,
      carousel: [],
    };
  },
  components: {
    Search,
  },
  async created() {
    let res_caro = await get_carousel(this.type);
    this.carousel = res_caro.data.data;
  },
  methods: {
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight[0].height;
      });
    },
  },
  mounted() {
    if (this.carousel.length !== 0) {
      this.imgLoad();
    }
    window.addEventListener("resize", () => {
      this.imgLoad();
    });
  },
};
</script>

<style lang="scss" scoped>
.carousel-wrap {
  position: relative;
  .search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }
}
// 轮播指示器
::v-deep .el-carousel__button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
::v-deep .el-carousel__indicators--outside button {
  background-color: #000;
}
</style>
